﻿/// <reference path="../Core.ts" />

module UI {

    export class Slider extends UIControl {

        public type: string = 'Slider';
        public text: string = '';
        public hoverButtonIndex: number = -1;
        public hoverMarkIndex: number = -1;
        public minValue: number = 0;
        public maxValue: number = 10;
        public enabledValues: number = 10;
        public visibleValues: number = 10;
        public value: number = 0;
        public buttonWidth: number = 40;
        public markWidth: number = 16;
        public markGapSize: number = 4;
        public onSliderValueChanged: Function = null;

        constructor(details: any) {
            super();
            setupControl(this, details);
            this.handleClick = this.handleClickInternal;
        }

        setupRange(minValue: number, maxValue: number, enabledValues: number, visibleValues: number, value: number) {
            this.minValue = minValue;
            this.maxValue = maxValue;
            this.enabledValues = enabledValues;
            this.visibleValues = visibleValues;
            this.value = value;
        }

        handleClickInternal(sender: UIControl, e: InputArgs) {
            var c = this.computed;
            if (this.hoverButtonIndex != -1 || this.hoverMarkIndex != -1) {
                if (this.hoverButtonIndex != -1) {
                    if (this.hoverButtonIndex == 0) this.value = 0;
                    if (this.hoverButtonIndex == 1) this.value -= 1;
                    if (this.hoverButtonIndex == 2) this.value += 1;
                    if (this.hoverButtonIndex == 3) this.value = this.maxValue;
                }
                if (this.hoverMarkIndex != -1) {
                    this.value = this.hoverMarkIndex + 1;
                }
                if (this.value < this.minValue) this.value = this.minValue;
                if (this.value > this.enabledValues) this.value = this.enabledValues;
                if (this.value > this.maxValue) this.value = this.maxValue;
                if (this.onSliderValueChanged !== null) {
                    this.onSliderValueChanged(this, this.value);
                }
            }
        }

        render(context: CanvasRenderingContext2D) {
            var c = this.computed;
            this.hoverButtonIndex = -1;
            this.hoverMarkIndex = -1;

            // Draw button on the left
            var colorBright = '#fff';
            var colorDark = '#222';
            var colorText = '#eee';
            var colorSelected = '#622';
            var colorHighlight = '#999';
            var color555 = '#555';
            var x = c.left;
            for (var i = 0; i < 2; i++) {
                context.fillStyle = color555;
                context.strokeStyle = colorDark;
                if (c.mouse !== null && c.mouse.x >= x - c.left && c.mouse.y >= 0 && c.mouse.x <= x - c.left + this.buttonWidth && c.mouse.y <= c.height) {
                    context.fillStyle = colorHighlight;
                    this.hoverButtonIndex = i;
                }
                context.fillRect(x, c.top, this.buttonWidth, c.height);
                context.strokeRect(x, c.top, this.buttonWidth, c.height);
                context.fillStyle = colorBright;
                UI.renderText(context, x + this.buttonWidth / 2, c.middle, 'center', 'middle', i == 0 ? '<<' : '<');
                x += this.buttonWidth + this.markGapSize;
            }

            // Draw marks
            for (var i = 0; i < this.visibleValues; i++) {
                if (c.mouse !== null && c.mouse.x >= x - c.left && c.mouse.y >= 0 && c.mouse.x <= x - c.left + this.markWidth + this.markGapSize && c.mouse.y <= c.height) {
                    this.hoverMarkIndex = i;
                }
                if (i < this.maxValue) {
                    if (i < this.enabledValues) {
                        if (i < this.value) {
                            context.fillStyle = i < this.minValue ? colorBright : colorSelected;
                            context.fillRect(x, c.top, this.markWidth, c.height);
                        }
                        context.strokeStyle = colorBright;
                        context.strokeRect(x, c.top, this.markWidth, c.height);
                    }
                    else {
                        context.strokeStyle = UI.COLOR_TEXT_DARK;
                        context.strokeRect(x, c.top, this.markWidth, c.height);
                    }
                }
                x += this.markWidth + this.markGapSize;
            }

            // Draw buttons on the right
            for (var i = 0; i < 2; i++) {
                context.fillStyle = color555;
                context.strokeStyle = colorDark;
                if (c.mouse !== null && c.mouse.x >= x - c.left && c.mouse.y >= 0 && c.mouse.x <= x - c.left + this.buttonWidth && c.mouse.y <= c.height) {
                    context.fillStyle = colorHighlight;
                    this.hoverButtonIndex = 2 + i;
                }
                context.fillRect(x, c.top, this.buttonWidth, c.height);
                context.strokeRect(x, c.top, this.buttonWidth, c.height);
                context.fillStyle = colorBright;
                UI.renderText(context, x + this.buttonWidth / 2, c.middle, 'center', 'middle', i == 0 ? '>' : '>>');
                x += this.buttonWidth + this.markGapSize;
            }

            // Draw text on the right
            context.fillStyle = colorText;
            context.font = UI.FONT_LARGE;
            UI.renderText(context, x, c.middle, 'left', 'middle', this.value + ' ' + this.text);
        }

    }

}